<template>
  <div class="echarts-box">
    <v-loading v-if="loadingStatus"></v-loading>
    <div :id="id" ref="myChart" class="in-charts" :style="loadingStatus ? 'opacity: .1;' : ''+'width:'+width+';height:'+height"></div>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  name: "eChart",
  // 验证类型
  props:{
    id:{
      type: String,
      default:"",
    },
    loadingStatus:{
      type: Boolean,
      default:false,
    },
    option:{
      type: Object,
      default:()=>{
        let obj={};
        return obj;
      },
    },
    width:{
      type: String,
      default:"1300px",
    },
    height:{
      type: String,
      default:"450px",
    },
  },
  watch: {
    option (val, oldVal) {//监听option变化
      this.draw();
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.draw();
  },
  destroyed() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    draw() {
      let that = this;
      // 实例化echarts对象
      setTimeout(function () {
        that.myChart = that.$echarts.init(that.$refs.myChart);
        that.myChart.clear();
        // 绘制条形图
        that.myChart.setOption(that.option, true);
        that.myChart.on("click", (item) => {
          // console.log(item, "echart");
        });
      }, 30);
    },
  },
};
</script>
<style scoped lang="scss">
.echarts-box {
  /*border-top:1px #ababab dotted ;*/
  /*border-top-style:dotted;*/
  text-align: center;
}
.echarts-box .in-charts {
  border-top:1px #ababab dotted ;
  width: 100%;
  height: 100%;
}
</style>
